<template>
	<view>
		<view class="before_head"></view>
		<view class="next_head">
			
		</view>
	<view class="head">
		<text>借贷</text>
		<input type="text" value="" placeholder="搜索相关信息"/>
		<image src="../../static/borrowMoney/dialogue2x.png" mode=""></image>
	</view>
	<view class="main">
		<view class="borrow_box">
			<text class="small_title">最高可借额度（元）</text>
			<text class="borrow_money">2000000.00</text>
			<text class="gray_measge">审批便捷|年综合利率低至7.2%</text>
			<view class="">
				<view class="before_btn">开通享受最高80元免息</view>
				<text class="sure_btn">同意协议并领取</text>
			</view>
			<text class="agree_gray">同意<text class="agree_blue">祥瑞借贷协议及信息授权</text></text>
			<view class="step_map">
				<text class="step_mesage">三步领取</text>
				<view class="step">
					<view class="step_num">1</view>
					<text class="step_text">实名认证</text>
					<text class="step_arrows">---></text>
				</view>
				<view class="step">
					<view class="step_num">2</view>
					<text class="step_text">银行卡认证</text>
					<text class="step_arrows">---></text>
				</view>
				<view class="step">
					<view class="step_num">3</view>
					<text class="step_text">信用评估</text>
				</view>
			</view>
		</view>
		<view class="list_icons">
			<view class="uni-icons">
				<image src="../../static/borrowMoney/4765@2x.png" mode=""></image>
				<text>抢疯了</text>
			</view>	
			<view class="uni-icons">
				<view class="before_text">免息</view>
				<image src="../../static/borrowMoney/4766@2x.png" mode=""></image>
				<text>30天免息</text>
			</view>	
			<view class="uni-icons">
				<image src="../../static/borrowMoney/4767@2x.png" mode=""></image>
				<text>做任务</text>
			</view>	
			<view class="uni-icons">
				<image src="../../static/borrowMoney/4768@2x.png" mode=""></image>
				<text>兑好礼</text>
			</view>	
			<view class="uni-icons">
				<image src="../../static/borrowMoney/4769@2x.png" mode=""></image>
				<text>赚奖励</text>
			</view>	
		</view>
		<view class="new_git">
			<text class="new_title">新人专享礼</text>
			<swiper  :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<view class="scroll-box">
							<view class="box-left">
								<text class="small">最高</text>
								<text class="big_text">90</text>
								<text class="min">元</text>
							</view>
							<view class="box-center">
								<text>新人免息券</text>
								<text>祥瑞金融可用</text>
							</view>
							<view class="box-right">
								<text class="get">
									获取额度
								</text>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="scroll-box">
							<view class="box-left">
								<text class="small">最高</text>
								<text class="big_text">90</text>
								<text class="min">元</text>
							</view>
							<view class="box-center">
								<text>新人免息券</text>
								<text>祥瑞金融可用</text>
							</view>
							<view class="box-right">
								<text class="get">
									获取额度
								</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 省心借钱 -->
		<view class="footer">
			<text class="new_title">省心借钱 <text class="small_gray">借现金，更懂你</text></text>
			<view class="footer-box">
				<view class="footerBox_left">
					<text class="caption">升级贷</text>
					<text class="text-blue">纯信用</text><text class="text-green">额度循环</text><text class="text-lightblue">随借随还</text>
					<text class="amount">最高可借额度（元）<text class="amount_red">3000,000.00</text></text>
				</view>
				<view class="footerBox_right">
					去开通
				</view>
			</view>
			<view class="footer-box">
				<view class="footerBox_left">
					<text class="caption">省心借</text>
					<text class="text-blue">日息低至万三</text><text class="text-green">门槛低来钱快</text>
					<text class="amount">最高可借额度（元）<text class="amount_red">3000,000.00</text></text>
				</view>
				<view class="footerBox_right">
					去开通
				</view>
			</view>
		</view>
	</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang='scss'>
	page{
		background-color: #2b6af1;
	}
	.next_head{
		width: 100%;
		height: 133rpx;
		background-color: #2b6af1;
	}
	.before_head{
		 height: var(--status-bar-height);
		      width: 100%;
	}
	.head{
		display: flex;
		position: fixed;
		padding-top: 52rpx;
		top: 0rpx;
		z-index: 5;
		justify-content: space-around;
		align-items: center;
		height: 150rpx;
		width: 750rpx;
		background-color:#2b6af1 ;
		text{
			font-size: 44rpx;
			color:#ffffff;
			font-weight: bolder;
		}
		input{
			width: 520rpx;
			height: 60rpx;
			background-color: #ffffff;
			border-radius: 50rpx;
			font-size: 24rpx;
			background-image:url(../../static/borrowMoney/search2x.png);
			background-repeat: no-repeat;
			background-size: 5%;
			padding-left: 50rpx;
			background-position: 8rpx 15rpx;
		}
		image{
			width: 48rpx;
			height: 40rpx;
			vertical-align: middle;
		}
	}
	.main{
		width: 750rpx;
		background-color: white;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		margin-top: 54rpx;
		position: relative;
		padding: 20rpx;
		box-sizing: border-box;
		.borrow_box{
			width: 712rpx;
			height: 500rpx;
			border-radius: 10rpx;
			box-shadow:0rpx 10rpx 0rpx 5rpx #fafafa;
			position: relative;
			top: -52rpx;
			background-color: white;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.small_title{
				font-size: 24rpx;
				color: #666666;
				display: block;
			};
			.borrow_money{
				font-size:44rpx;
				color: #333333;
				font-weight: bold;
				display: block;
			};
			.gray_measge{
				font-size: 24rpx;
				color: #999999;
				display: block
			};
			.sure_btn{
				height: 88rpx;
				width: 520rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				background-color: #3476f1;
				font-size: 24rpx;
				text-align: center;
				display: block;
				color: white;
				margin: 0 auto;
			};
			.agree_gray{
				font-size: 20rpx;
				color: #c5c5c5;
				.agree_blue{
					color: #3476f1;
				}
			};
			.step_map{
				padding: 15rpx;
				display: flex;
				justify-content: space-between;
				height: 64rpx;
				background-color: #eaf1fe;
				border-radius: 4rpx;
				.step_mesage{
					font-size: 20rpx;
					color: #333333;
					width: 50rpx;
				}
				.step{
					.step_num{
						font-size: 20rpx;
						width: 16px;
						height: 16px;
						border-radius: 50%;
						background-color: white;
						display: inline-block;
						color: #333333;
						margin-right: 10rpx;
					}
					.step_text{
						font-size: 24rpx;
						color: #333333;
						margin-right: 10rpx;
					}
					.step_arrows{
						color: #CCCCCC;
					}
				}
			}
		}
		.list_icons{
			display: flex;
			justify-content: space-between;
			position: relative;
			.uni-icons{
				image{
					width: 88rpx;
					height: 88rpx;
				}
				text{
					font-size: 24rpx;
					display: block;
					margin-top: 10rpx;
				}
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
		.new_git{
			margin-top: 30rpx;
			height: 246rpx;
		}
		.scroll-box{
			display: inline-flex;
			justify-content: space-between;
			align-items: center;
			height: 150rpx;
			width: 640rpx;
			background-image: url(../../static/borrowMoney/yellow.png);
			background-size: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			.box-left{
				color: white;
				height: 100%;
				width: 165rpx;
				line-height: 100%;
				border-right: 2px white dashed;
				.small{
					writing-mode:tb-rl;
					font-size: 24rpx;
					color: white;
					margin-top: 30rpx;
				}
				.big_text{
					font-size: 62rpx;
					color: white;
				}
			}
			.box-center{
				font-size: 24rpx;
				color: white;
				text{
					display: block;
				}
			}
			.box-right{
				width: 160rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				background-color: white;
				font-size: 24rpx;
				color: #e2bc6f;
				border-radius: 50rpx;
				.get{
				}
			}
		}
	}
	.scroll-view_H{
		white-space: nowrap;
		margin-top: 20rpx;
	}
	swiper{
		height: 150rpx;
		margin-top: 20rpx;
	}
	/* 小标题 */
	.new_title{
		font-size: 30rpx;
		margin-left: 10rpx;
		margin-bottom: 20rpx;
	}
	.new_title::before{
	    content:"";
		height: 32rpx;
		width: 6rpx;
		background-color: #3476f1;
		display:inline-block;
		vertical-align: middle;
		margin-right: 10rpx;
	}
	.small_gray{
		color: #CCCCCC;
		font-size: 22rpx;
		margin-left:20rpx;
	}
	.footer-box{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 24rpx;
		height: 216rpx;
		box-shadow: 0 0 0 10rpx #f9f9f9;
		border-radius: 10rpx;
		padding: 30rpx;
		.text-blue{
			font-size: 20rpx;
			color: #3476f1;
			border-radius: 2rpx;
			border: 1px solid #3476f1;
			padding: 5rpx;
			margin-right: 20rpx;
		}
		.text-green{
			font-size: 20rpx;
			color: #53b648;
			border-radius: 2rpx;
			border: 1px solid #53b648;
			padding: 5rpx;
			margin-right: 20rpx;
		}
		.text-lightblue{
			font-size: 20rpx;
			color: #54a8ee;
			border-radius: 2rpx;
			border: 1px solid #54a8ee;
			padding: 5rpx;
			margin-right: 20rpx;
		}
		.amount{
			margin-top: 38rpx;
			display: block;
			font-size: 20rpx;
			.amount_red{
				font-size: 36rpx;
				color: #f85656;
				font-weight: bold;
			}
		}
	}
	.caption{
		font-size: 32rpx;
		display: block;
		font-weight: bold;
		margin-bottom: 24rpx;
	}
	.footerBox_right{
		width: 174rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		background-color: #3476f1;
		border-radius: 22rpx;
		color: white;
		font-size: 28rpx;
	}
	/* 汽包 */
	.before_btn{
		background-image: url(../../static/borrowMoney/RoundRect.png);
		background-size: 100%;
		font-size: 22rpx;
		color: white;
		width: 246rpx;
		height: 50rpx;
		margin-left: 400rpx;
		padding-top: 6rpx;
		box-sizing: border-box;
		}
	.before_text{
		background-image: url(../../static/borrowMoney/square.png);
		background-size: 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: -30rpx;
		left: 200rpx;
		color: white;
		width: 100rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 20rpx;
	}
</style>